<template>
  <div class="error-view1">
    <div class="module flex flexwrap">
      <img src="./../../../static/img/403.png" alt="">
      <div class="right">
        <p class="top1">403</p>
        <p class="top2">页面已转移！</p>
        <p class="top3">糟了，这个页面已经被外星人占领了，还是护送您回首页吧</p>
        <el-button
          class="btnRed"
          type="danger"
          size="large"
          round
          @click="backAction"
        >返回首页</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Error403',
  components: {},
  data() {
    return {}
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    backAction() {
      this.$router.replace('/home')
    }
  }
}
</script>
<style lang="scss" scoped>
.error-view1{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .module{
    width: 600px;
    img{
      width: 190px;
      height: 190px;
    }
    .top1{
      font-size: 48px;
      color: #f5222d;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .top2{
      font-size: 20px;
      margin-bottom: 20px;
      font-weight: bold;
    }
    .top3{
      font-size: 14px;
      color: grey;
      margin-bottom: 20px;
    }
  }
   @media screen and (max-width: 768px) {
    .module{
    width: 300px;
    text-align: center;
    img{
      width: 180px;
      height: 180px;
      margin: 0 auto;
    }
    .top1{
      font-size: 48px;
      color: #f5222d;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .top2{
      font-size: 20px;
      margin-bottom: 20px;
      font-weight: bold;
    }
    .top3{
      font-size: 14px;
      color: grey;
      margin-bottom: 20px;
    }
  }
   }
}
</style>
